<template>
  <div>
  <div class="margin-box">
    <img :src="user.picture" alt="头像" class="round-image">
    <el-dropdown size="medium">
          <span class="el-dropdown-link" style="cursor: pointer;position: relative; top: -10px;left:5px">
            {{ user.uname }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
      <el-dropdown-menu slot="dropdown" style="margin-top: -5px">

        <el-dropdown-item>
          <el-dropdown-item>
            <el-upload
                class="upload-demo"
                :action="'http://localhost:9090/api/file/upload?token=' + user.token"
                :show-file-list="false"
                :on-success="handleCoverSuccess">
              <template slot="trigger">
                <div style="width: 70px; text-align: right;">上传头像</div>
              </template>
            </el-upload>
          </el-dropdown-item>

        </el-dropdown-item>
        <el-dropdown-item>
          <div style="width: 70px; text-align: right; " @click="logout">退出</div>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
  </div>

</template>

<script>

import Cookies from 'js-cookie'
import request from "@/utils/request";
export default {
  name: "HomeHeader",
  data(){
    return{
      form :{},
    }
  },
  props: {
    user: {
      type: Object,
      required: true,
      // 自定义对user的校验
      validator(o) {
        return true;
      }
    },
    name: '',
  },
  created() {
    this.load()
  },
  methods:{
    handleCoverSuccess(res) {
      if (res.code === '200') {
        this.form.picture = res.data;
        this.form.uname = this.user.uname
        request.put('/user/updateP', this.form).then(res => {
          if (res.code === '200') {
            this.load(); // 执行更新页面数据的方法，你需要定义该方法
          } else {
            this.$notify.error(res.msg);
          }
        });
      }
      else {
        this.$notify.error(res.msg);
      }
    },
    logout() {
      // 清除浏览器用户数据
      Cookies.remove('user')
      this.$router.push('/login')
    }
  },
}
</script>

<style scoped>

.round-image {
  border-radius: 50%;
  margin-top: 5px;
  width: 40px;
  height: 35px;
}
.margin-box {
  text-align: right;
  padding-right: 20px;
  background: #000;
  height: 50px;
  color: #eeeeee;

}
</style>
